<template>
  <div>
    <div class="search">
      <el-select placeholder="请选择维修类型查询" style="width: 200px; margin-right: 10px" v-model="repairType">
        <el-option v-for="item in repairTypeList" :key="item.id" :value="item.type"></el-option>
      </el-select>
      <el-select placeholder="请选择维修状态查询" style="width: 200px; margin-right: 10px" v-model="repairStatus">
        <el-option v-for="item in statusList" :key="item.id" :value="item.type"></el-option>
      </el-select>
      <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="start" placeholder="请选择开始日期查询" style="width: 200px; margin-right: 10px"></el-date-picker>
      <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="end" placeholder="请选择结束日期查询" style="width: 200px;"></el-date-picker>
      <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
    </div>

    <div class="operation">
      <el-button type="danger" plain @click="delBatch">批量删除</el-button>
      <el-button type="info" plain @click="exportBatch">批量导出</el-button>
    </div>

    <div class="table">
      <el-table :data="repair" stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" label="序号" width="70" align="center" sortable></el-table-column>
        <el-table-column prop="repairNumber" label="报修单号"></el-table-column>
        <el-table-column prop="buildingNumber" label="楼号"></el-table-column>
        <el-table-column prop="repairAddress" label="报修地址"></el-table-column>
        <el-table-column prop="repairInfo" label="报修信息">
          <template v-slot="scope">
            <el-button size="mini" type="primary" plain @click="viewRepairInfo(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="repairType" label="维修类型"></el-table-column>
        <el-table-column prop="repairStatus" label="维修状态"></el-table-column>
        <el-table-column prop="repairDetails" label="维修信息">
          <template v-slot="scope">
            <el-button size="mini" type="primary" plain @click="viewRepairDetails(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="evaluation" label="评价">
          <template v-slot="scope">
            <el-button size="mini" type="success" plain @click="viewEvaluation(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template v-slot="scope">
            <el-button size="mini" type="primary" plain @click="assignRepair(scope.row)">分配</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="reportTime" label="报修时间"></el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 弹窗：报修信息 -->
    <el-dialog title="报修信息详情" :visible.sync="repairInfoVisible" :width="isMobile ? '90%' : '40%'"
    class="dialog-mobile-adapted" :close-on-click-modal="false" destroy-on-close>
      <el-form :model="repairInfo" label-width="100px">
        <el-form-item label="报修人">
          <el-input v-model="repairInfo.reporter" readonly></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="repairInfo.contactPhone" type="textarea" readonly></el-input>
        </el-form-item>
        <el-form-item label="报修内容">
          <el-input v-model="repairInfo.repairContent" type="textarea" readonly></el-input>
        </el-form-item>
        <el-form-item label="报修图片">
          <el-image v-for="img in repairInfo.reportImages" :src="img" :key="img" style="margin: 5px" />
        </el-form-item>
      </el-form>
      <!-- <p><strong>报修人：</strong>{{ selectedRepairInfo.repairPerson }}</p>
      <p><strong>联系电话：</strong>{{ selectedRepairInfo.phone }}</p>
      <p><strong>报修内容：</strong>{{ selectedRepairInfo.content }}</p>
      <el-image v-for="img in selectedRepairInfo.images" :src="img" :key="img" style="margin: 5px" /> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="repairInfoVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 维修信息对话框 -->
    <el-dialog title="维修信息" :visible.sync="repairDetailsVisible" :width="isMobile ? '90%' : '40%'"
    class="dialog-mobile-adapted">
      <el-form :model="repairDetails" label-width="120px">
        <el-form-item label="维修员1">
          <el-input v-model="repairDetails.repairPerson1" readonly></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="repairDetails.repairPerson1Phone" readonly></el-input>
        </el-form-item>
        <el-form-item label="维修员2">
          <el-input v-model="repairDetails.repairPerson2" readonly></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="repairDetails.repairPerson2Phone" readonly></el-input>
        </el-form-item>
        <el-form-item label="维修图像">
          <!-- <el-image v-if="repairDetails.image" :src="repairDetails.image" style="width: 100%;"></el-image> -->
          <el-image v-for="img in repairDetails.repairImages" :src="img" :key="img" style="margin: 5px" />
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 评价查看对话框 -->
    <el-dialog title="评价" :visible.sync="evaluationVisible" :width="isMobile ? '90%' : '40%'"
    class="dialog-mobile-adapted">
      <el-form :model="evaluationForm" label-width="100px">
        <el-form-item label="评分">
          <el-rate v-model="evaluationForm.rating" disabled></el-rate>
        </el-form-item>
        <el-form-item label="评价内容">
          <el-input v-model="evaluationForm.comments" type="textarea" readonly></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="evaluationVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 弹窗：分配维修 -->
    <el-dialog title="分配维修" :visible.sync="assignVisible" :width="isMobile ? '90%' : '40%'"
    class="dialog-mobile-adapted" :close-on-click-modal="false" destroy-on-close>
      <el-table :data="workerList" stripe @selection-change="handleAssignSelection">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="name" label="维修人"></el-table-column>
        <el-table-column prop="repairCount" label="在修数量"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="assignVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAssignment">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Repair",
  data() {
    return {
      repair: [
        {
          id: 1,
          repairNumber: "RO20241124001",
          buildingNumber: "1号楼",
          repairAddress: "1号楼201室",
          buildingNumber: 'A1',
          repairAddress: '某某地址',
          reporter: '张三',
          contactPhone: '123456789',
          repairType: '电路问题',
          repairContent: '电路短路需要维修',
          repairStatus:'已分配',
          repairPerson1:'维修员A',
          repairPerson1Phone:'111111',
          repairPerson2:'维修员B',
          repairPerson2Phone:'22222',
          rating:0,
          comments: '',          
          reportImages: [
            'http://localhost:9090/files/1733649497371-1733648955008-用例图.jpg',
            'http://localhost:9090/files/1733649497371-1733648955008-用例图.jpg',
          ],
          repairImages: [
            'http://example.com/uploads/image1.jpg',
            'http://example.com/uploads/image1.jpg',
          ],
          reportTime:"2024-11-23 14:30:00"
        },
      ], // 表格数据
      pageNum: 1,
      pageSize: 10,
      total: 2,
      repairType: null,
      repairStatus: null,
      start: null,
      end: null,
      repairTypeList: [
        { "id": 1, "name": "水" },
        { "id": 2, "name": "电" },
        { "id": 3, "name": "空调" },
        { "id": 4, "name": "暖气" }
      ]
, // 维修类型数据
      statusList: [
        { "id": 1, "name": "待分配" },
        { "id": 2, "name": "维修中" },
        { "id": 3, "name": "已完成" },
        { "id": 4, "name": "异常" },
        { "id": 5, "name": "退回" }
      ]
, // 维修状态数据
      repairInfoVisible: false,
      repairDetailsVisible: false,
      evaluationVisible: false,
      assignVisible: false,
      repairInfo: {},
      repairDetails: {},
      assignInfo: {},
      evaluationForm: {},
      workerList: [
        {
          "id": 1,
          "name": "王五",
          "repairCount": 3
        },
        {
          "id": 2,
          "name": "赵六",
          "repairCount": 2
        },
      ],
      selectedWorkers: [],
    };
  },
  computed: {
    isMobile() {
      return window.innerWidth < 768;
    },
  },
  created() {
    this.load(1);
    this.fetchRepairTypes();
    this.fetchStatuses();
    this.fetchWorkers();
  },
  methods: {
    fetchRepairTypes() {
      this.$request.get('/category/selectAll').then(res => {
        this.repairTypeList = res.data || [];
      });
    },
    fetchStatuses() {
      this.$request.get('/state/selectAll').then(res => {
        this.statusList = res.data || [];
      });
    },
    fetchWorkers() {
      this.$request.get('/worker/selectAllAssign').then(res => {
        this.workerList = res.data || [];
      });
    },
    load(pageNum) {
      if (pageNum) this.pageNum = pageNum;
      this.$request.get('/admin/repair/selectPage', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          repairType: this.repairType,
          repairStatus: this.repairStatus,
          start: this.start,
          end: this.end,
        }
      }).then(res => {
        this.repair = res.data?.list || [];
        this.total = res.data?.total || 0;
      });
    },
    reset() {
      this.repairType = null;
      this.repairStatus = null;
      this.start = null;
      this.end = null;
      this.load(1);
    },
    handleAssignSelection(rows) {
      this.selectedWorkers = rows;
    },
    viewRepairInfo(row) {
      this.repairInfo = { ...row };
      this.repairInfoVisible = true;
    },
    viewRepairDetails(row) {
      this.repairDetails = { ...row };
      this.repairDetailsVisible = true;
    },
    viewEvaluation(row) {
      this.evaluationForm = {
        rating: row.rating || 0,
        comments: row.comments || '暂无评价',
      };
      this.evaluationVisible = true;
    },
    assignRepair(row) {
      this.assignVisible = true;
      this.assignInfo = {...row};
      // this.$request.get('/workers').then(res => {
      //   this.workerList = res.data || [];
      // });
    },
    saveAssignment() {
      if (this.selectedWorkers.length !== 2) {
        this.$message.warning('请选择两位维修人员');
        return;
      }
      this.$request.post('/admin/repair/assign', {
        id: this.assignInfo.id,
        workerId: this.selectedWorkers.map(w => w.id),
        workerName: this.selectedWorkers.map(w => w.name),
        workerPhone: this.selectedWorkers.map(w => w.phone),
        workerUserName: this.selectedWorkers.map(w => w.username)
      }).then(res => {
        if (res.code === "200") {
          this.$message.success('分配成功');
          this.assignVisible = false;
          this.fetchWorkers();
          this.load(1);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    exportBatch() {
      let url = this.$baseUrl + '/admin/repair/export'
      if (this.repairType!=null) {
        url += '?repairType=' + this.repairType
      }
      if (this.repairStatus!=null) {
        url += '?repairStatus=' + this.repairStatus
      }
      window.open(url);
    },
    delBatch() {
      if (!this.ids.length) {
        this.$message.warning('请选择数据')
        return
      }
      this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/admin/repair/delete/batch', {data: this.ids}).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
  },
};
</script>

<style scoped>
@media (max-width: 767px) {
  .table {
    overflow-x: auto;
  }
}

/* 弹窗适配 */
.dialog-mobile-adapted .el-dialog__body {
  padding: 15px;
}
</style>
